<template>
  <div style="margin-top: 50px">
  <!-- 电梯信息 -->
    <el-form  
             ref="lifts"  
             label-width="120px"
             class="form-inner-container"
             size="small"
             :rules="rules"
             :model="value"
             >
            <el-form-item   v-for="(item,index) in value.liftArr" :key="index">
              <el-form-item label="电梯图片：" prop="url">
                <ImageUpload v-model="item.url" @change="event=>getAvatarUrl(event,index)"  :isbig="true"/>
              </el-form-item>
              <el-form-item label="电梯名称：" prop="name">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
            </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev" v-if="isEdit">上一步，修改电梯信息</el-button>
        <el-button size="medium" @click="handlePrev" v-else>上一步，添加电梯信息</el-button>

        <el-button type="primary" size="medium" @click="handleFinishCommit"  v-if="isEdit" >完成，保存修改楼盘信息</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit('lifts')"  v-else >完成，添加楼盘</el-button>


      </el-form-item>  
     </el-form>
  </div>
</template>

<script>
  import {fetchListAll as fetchSubjectList} from '@/api/subject'
  import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
  import ImageUpload from "@/components/image-upload";
  import {getUpToken,uploadQNImage} from "@/api/auser"
  import qiniu from "@/utils/qiniu";

  export default {
    name: "ProductRelationDetail",
    components: {
    ImageUpload
  },
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
       rules:{
        name:[{required:true,message:'请输入电梯号',trigger: 'blur'},{min:2,message:'长度不低于2个字符',trigger:'blur'}]
       },
        //所有专题列表
        subjectList: [],
        //专题左右标题
        subjectTitles: ['待选择', '已选择'],
        //所有专题列表
        prefrenceAreaList: [],
        //专题左右标题
        prefrenceAreaTitles: ['待选择', '已选择']
      };
    },
    created() {
      // this.getSubjectList();
      // this.getPrefrenceAreaList();
    },
    computed:{
      // 根据前面填写的lift个数动态添加电梯

      //选中的专题
      selectSubject:{
        get:function () {
          let subjects =[];
          if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
            return subjects;
          }
          for(let i=0;i<this.value.subjectProductRelationList.length;i++){
            subjects.push(this.value.subjectProductRelationList[i].subjectId);
          }
          return subjects;
        },
        set:function (newValue) {
          this.value.subjectProductRelationList=[];
          for(let i=0;i<newValue.length;i++){
            this.value.subjectProductRelationList.push({subjectId:newValue[i]});
          }
        }
      },
      //选中的优选
      selectPrefrenceArea:{
        get:function () {
          let prefrenceAreas =[];
          if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
            return prefrenceAreas;
          }
          for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
            prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
          }
          return prefrenceAreas;
        },
        set:function (newValue) {
          this.value.prefrenceAreaProductRelationList=[];
          for(let i=0;i<newValue.length;i++){
            this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
          }
        }
      }
    },
    mounted(){
   
    },
    methods: {
         // 上传图片到七牛云
         getAvatarUrl(file,index) {
      console.log("图片上传", file,index);

      if (file) {
        getUpToken()
          .then(res => {
            return uploadQNImage({
              token: res.uptoken,
              file: file.raw
            });
          })
          .then(res => {
            if (res.key) {
              this.$set(
                this.value.liftArr[index],
                "url",
                `${qiniu.domain}${res.key}`
              );
              console.log('上传电梯',`${qiniu.domain}${res.key}`);
            }
          });
      }
    },
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      getSubjectList() {
        fetchSubjectList().then(response => {
          let list = response.data;
          for (let i = 0; i < list.length; i++) {
            this.subjectList.push({
              label: list[i].title,
              key: list[i].id
            });
          }
        });
      },
      getPrefrenceAreaList() {
        fetchPrefrenceAreaList().then(response=>{
          let list = response.data;
          for (let i = 0; i < list.length; i++) {
            this.prefrenceAreaList.push({
              label: list[i].name,
              key: list[i].id
            });
          }
        });
      },
      handlePrev(){
        this.$emit('prevStep')
      },
      handleFinishCommit(formName){
        // 是否满足必填条件
        console.log(this.$refs[formName]);
      // this.$refs[formName].validate((valid)=>{
      //   console.log('valid',valid);
      //   if(valid){
      //     this.$emit('finishCommit');
      //   }else{
      //     this.$message({
      //       message:'请完善电梯信息',
      //       type:'warning',
      //       duration:1000
      //     })
      //   }
      // })
      console.log(this.value.liftArr);
      if(this.value.liftArr.every(item=>item.name!=="")){
          this.$emit('finishCommit');
      }else{
        this.$message({
            message:'请完善电梯信息',
            type:'warning',
            duration:1000
          })
      }
      }
    }
  }
</script>

<style scoped>

</style>
